<template>
  <div class="articles" :style="'margin:' + margin">
    <div class="row center" style="margin-bottom: 24px" v-if="haveTitle">
      <span class="divider"></span>
      <span class="title">
        {{ articleType }}
      </span>
      <span class="divider"></span>
    </div>
    <el-page-header
      :class="border === true ? 'border page-header' : 'page-header'"
      title="当前位置"
      :style="'width:' + width"
    >
      <template #icon>
        <el-icon><HomeFilled /></el-icon>
      </template>
      <template #content>
        <span> {{ articleType }} </span>
      </template>
      <div class="col" style="align-items: center">
        <div
          class="col w-full"
          v-for="(article, index) in articleList.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
          )"
          :key="article.id"
          @click="
            // 点击跳转到对应的文章
            $router.push({
              name: 'article',
              query: {
                articleId: article.id,
              },
            })
          "
        >
          <el-divider
            v-if="index != 0"
            style="margin: 4px"
            border-style="dashed"
          />
          <div class="article">
            <span style="font-size: large">
              {{ article.title }}
            </span>
            <span>
              {{ article.time }}
            </span>
          </div>
        </div>
        <el-pagination
          style="margin: 10px"
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="articleList.length"
          v-model:current-page="currentPage"
        />
      </div>
    </el-page-header>
  </div>
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
  props: {
    type: {},
    haveTitle: {
      default: true,
    },
    width: {
      default: '60%',
    },
    margin: {
      default: '24px 0 24px 0',
    },
    border: {
      default: true,
    },
  },
  setup(props) {
    const route = useRoute()
    const articleType =
      route.query.articleType === undefined
        ? props.type
        : route.query.articleType
    const articleList = ref<any>([])
    const currentPage = ref(1)
    const pageSize = ref(15)
    onMounted(() => {
      axios
        .get('/api/getEssayByType', {
          params: {
            type: articleType,
          },
        })
        .then((res) => {
          articleList.value = res.data.data
          console.log(res.data.data.length)
        })
    })
    return {
      articleType,
      articleList,
      currentPage,
      pageSize,
    }
  },
})
</script>

<style scoped>
.articles {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 20px 8px 20px;
}
.article:hover {
  color: #205ab4;
}
.divider {
  width: 120px;
  height: 2px;
  background: #205ab4;
  display: block;
}
.title {
  font-size: xx-large;
  font-weight: 600;
  margin: 24px;
}
.page-header {
  min-width: 800px;
  align-items: center;
  background: white;
  padding: 12px;
}
</style>
